<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      >

<title>功能定义</title>
<content>
<!--    <div class="layui-tab-brief layui-tab">-->
<!--        <ul class="layui-tab-title site-demo-title">-->
<!--            <li class="layui-this"><a><cite>功能定义</cite></a></li>-->
<!--        </ul>-->
<!--    </div>-->
<!--    <div class="layui-fluid" style="padding: 15px;">-->
<!--        <div class="layui-row layui-col-space15">-->
<!--            <div class="layui-col-md12">-->
<!--                <div class="layui-card">-->
<!--                    &lt;!&ndash;                    <div class="layui-card-header ">&ndash;&gt;-->
<!--                    &lt;!&ndash;                        <h1>产品列表</h1>&ndash;&gt;-->
<!--                    &lt;!&ndash;                    </div>&ndash;&gt;-->


<!--                    <div class="layui-card-body">-->
<!--                        <table class="layui-hide" id="functionTable" lay-filter="buttons"></table>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->

</content>

<dd class="layui-this" th:fragment="functionList">
    <a href="/pages/functions">功能定义</a>
</dd>
<div th:fragment="scripts">

    <script th:inline="none" type="text/html" id="barDemo">
        <button class="layui-btn layui-btn-xs" lay-event="detail">查看</button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
    </script>

    <script type="text/html" id="layerRefresh">
        <div class="layui-btn-container">
            <button id="createButton"
                    class="layui-btn layui-btn-normal layui-btn-radius"
                    lay-event="createFunction">
                添加功能
            </button>
            <button id="refreshButton"
                    class="layui-btn layui-btn-checked layui-btn-radius"
                    lay-event="refresh">
                刷新
            </button>
        </div>
    </script>


    <script th:inline="none">
        layui.use('table', function () {
            var table = layui.table;

            var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
            //第一个实例
            table.render({
                elem: '#functionTable',
                url: '/api/functions/', //数据接口
                page: true,  //开启分页
                toolbar: '#layerRefresh',
                defaultToolbar:['exports', 'print'],
                //width: 1200,
                cols: [
                    [ //表头
                        // {type: 'checkbox'},
                        {field: 'functionId', title: 'FunctionKey', sort: true, align: 'center'},
                        {field: 'functionType', title: '功能类型', align: 'center'},
                        {field: 'functionName', title: '功能名称', align: 'center'},
                        {field: 'functionIdentifier', title: '标识符', sort: true, align: 'center'},
                        {
                            title: '操作', align: 'center',
                            toolbar: '#barDemo'
                        }
                    ]
                ]
            });

            // 头工具栏事件
            table.on('toolbar(buttons)', function (obj) {

                var checkStatus = table.checkStatus('test');
                switch (obj.event) {
                    case 'createFunction':
                        notice();
                        break;
                    case 'refresh':
                        table.reload("functionTable")

                        break;
                }
                ;
            });

            //监听工具条
            table.on('tool(buttons)', function (obj) {

                var data = obj.data;
                if (obj.event === 'detail') {
                    // layer.('ID：' + data.functionId + ' 的查看操作');
                    location.href = "/pages/functionDetails?functionId=" + data.functionId;
                } else if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {

                        $.ajax({
                            type: "delete",
                            url: "/api/function",
                            async: false,//同步提交。不设置则默认异步，异步的话，最后执行ajax
                            data: JSON.stringify({'functionId': data.functionId}),
                            contentType: "application/json",
                            // processData: false,
                            // cache: false,
                            success: function (ev) {
                                if (ev.data == "删除成功") {
                                    obj.del();
                                    layer.msg(ev.data);
                                    layer.close(index);
                                    table.reload("functionTable");
                                } else {
                                    layer.msg(ev.data);
                                    layer.close(index);
                                }
                            }
                        });
                    });
                }
            });

            //触发创建产品弹出层

            function notice(){
                //示范一个公告层
                layer.open({
                    type: 2
                    ,
                    title: "新建功能"
                    ,
                    closeBtn: 1
                    ,
                    area: ['600px', '600px']
                    ,
                    shade: 0.3
                    ,
                    id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    ,
                    btn: ['提交', '重置', '取消']
                    ,
                    btnAlign: 'c'
                    ,
                    moveType: 1 //拖拽模式，0或者1
                    ,
                    content: '/pages/functionCreate'
                    ,
                    // success: function (layero) {
                    //     var btn = layero.find('.layui-layer-btn');
                    //     btn.find('.layui-layer-btn0').attr({
                    //         href: 'http://www.layui.com/'
                    //         , target: '_blank'
                    //     });
                    // }
                    yes: function (index, layero) {

                        // 获取弹出层中的form表单元素
                        var formSubmit = layer.getChildFrame('form', index);
                        // // 获取表单中的提交按钮（在我的表单里第一个button按钮就是提交按钮，使用find方法寻找即可）
                        var submited = formSubmit.find('button')[0];
                        // // 触发点击事件，会对表单进行验证，验证成功则提交表单，失败则返回错误信息
                        submited.click();
                        // layer.close(index);
                        // 弹出层关闭的操作在子层的js代码中完成

                    },
                    btn2: function (index, layero) {
                        //按钮【重置】的回调
                        // 获取弹出层中的form表单元素
                        var formSubmit = layer.getChildFrame('form', index);
                        // // 获取表单中的提交按钮（在我的表单里第一个button按钮就是提交按钮，使用find方法寻找即可）
                        var submited = formSubmit.find('button')[1];
                        submited.click();
                        return false;
                    }
                });
            };
        });

    </script>


</div>
</html>

